html, body {
    width:100%;
    height:100%;
}
body{
    overflow: hidden;
}
.loading{
    z-index:99;
}
.loading_heard{
    width:31.25%;
    height: 17.6%;
    position:absolute;
    left:50%;
    margin-left: -15.625%;
    top:30%;
}
.section.page-current{
    opacity:1;
    z-index: 12;
}
/*.section{*/
    /*opacity:0;*/
    /*overflow: hidden;*/
    /*left:0;*/
    /*top:0;*/
    /*position:absolute;*/
    /*width:100%;*/
    /*height:100%;*/
    /*transition: top 0.6s ease;*/
    /*-webkit-transition: top 0.6s ease;*/
/*}*/
.content,.loading{
    width:100%;
    height:100%;
    position:absolute;
}
/*音乐按钮*/
.music{
    position: absolute;
    right:5.65%;
    top:3.16%;
    z-index:13;
    width:7.5%;
    height:4.76%;
}
.music a{
    display:block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(../img/572b7f03a3664e9a290000fc.png) no-repeat;
    background-size:100% 100% ;
}
.music .off{
    background: url(../img/572b7f03a3664e8529000124.png) no-repeat;
    background-size:100% 100% ;
}
.m_page{
    overflow: hidden;
    left:0;
    top:0;
    position:absolute;
    width:100%;
    height:100%;
}
/*背景图片*/
.background_img{
    position: absolute;
    overflow: hidden;
    width: 100%;
    height:100%;
    top: 0;
    left: 0;
    background-size: 100%;
}
.water,.water1{
    position: absolute;
    top:44%;
    left:0;
    width:100%;
    height:19.36%;
    opacity: 0.5;
    transform-origin: top center;
    -webkit-transform-origin: top center;
}
.water{
    animation: water 4s ease infinite;
    -webkit-animation: water 4s ease infinite;
}
.water1{
    animation: water 4s ease infinite 2.5s;
    -webkit-animation: water 4s ease infinite 2.5s;
}

.hair{
    position: absolute;
    left: 16%;
    top:31%;
    width:9%;
    height:11%;
    z-index:1;
    transform-origin: top center;
    -webkit-transform-origin: top center;
    animation:  hair 0.5s ease alternate infinite;
    -webkit-animation:  hair 0.5s ease alternate infinite;
}

.mother_daugther{
    position: absolute;
    bottom:0;
    left:0;
    z-index:8;
    width: 100%;
    height:73%;
}
.hand_breakup{
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    width:85.9%;
}
.hand{
    width:73.125%;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    opacity: 0;
}
.title1{
    position:absolute;
    z-index:8;
    right:13.41%;
    top:5.285%;
    width:14.6%;
    height:3.4%;
}
.title2{
    position:absolute;
    z-index:8;
    right:13.43%;
    top:10.38%;
    width:68.755%;
    height:3.4%;
    opacity: 0;
}
.title3{
    position:absolute;
    z-index:8;
    right:13.43%;
    top:15.66%;
    width:40.9%;
    height:3.4%;
    opacity: 0;
}
.page-current .title1{
    animation: toup 0.5s linear forwards;
    -webkit-animation: toup 0.5s linear forwards;
}
.page-current .title2{
    animation: toup 0.5s linear 1s forwards;
    -webkit-animation: toup 0.5s linear 1s forwards;
}
.page-current .title3{
    animation: toup 0.5s linear 2s forwards;
    -webkit-animation: toup 0.5s linear 2s forwards;
}
.cricel{
    width:32.6%;
    height:43.4%;
    z-index: 3;
    border-radius:50%;
    background:rgb(255,99,99);
    position:absolute;
    left:32.5%;
    bottom:57%;
}
.crice2{
    width:32.6%;
    height:43.4%;
    z-index: 3;
    border-radius:50%;
    background:rgb(255,99,99);
    position:absolute;
    left:32.5%;
    bottom:57%;
    animation: crice 2s ease infinite;
    -webkit-animation: crice 2s ease infinite;
}
.on_click{
    position:absolute;
    left:38%;
    bottom:20.5%;
    z-index:9;
    width:25%;
    height:62.3%;
}
.hint{
    position:absolute;
    width:28.75%;
    height:12.14%;
    left:32.8%;
    bottom:17.6%;
    opacity: 0;
    transition: opacity 0.5s ease 3s;
    -webkit-transition: opacity 0.5s ease 3s;
}
.page-current .hint{
    opacity:1;
}
.hint_title{
    position:absolute;
    left:0;
    bottom:0;
    z-index:9;
    width:100%;
    height:16.3%;
}
.up_arrow{
    position:absolute;
    z-index:13;
    left:50%;
    width:13.43%;
    height:7.57%;
    margin-left:-6.71%;
    bottom:2%;
    display:none;
}

/*第二页*/
.head{
    position: absolute;
    left:15.5%;
    top:34%;
    z-index:2;
    width:44.375%;
    height:24.1%;
}
.heard{
    position:absolute;
    top:77%;
    left:51%;
    width:13%;
    height:6%;
    opacity:0;
}
.top_arm{
    position:absolute;
    top:47%;
    left:2%;
    z-index:1;
    width:26.56%;
    height:16.4%;
}
.right_arm{
    position:absolute;
    top:56%;
    left:0;
    z-index:3;
    width:55.46%;
    height:24.11%;
}
.gril_arm{
    position:absolute;
    width:36.5%;
    height:10.2%;
    z-index:1;
    left:16%;
    top:69%;
}
.hint.two_hint{
    left:28%;
    bottom:14%;
}
.title4{
    position:absolute;
    left:6%;
    top:8%;
    z-index:3;
    width:21.25%;
    height:3.4%;
}
.page-current .title4{
    animation: toleft 0.5s linear forwards;
    -webkit-animation: toleft 0.5s linear forwards;
}
.page-current .title5{
    animation: toleft 0.5s linear 1s forwards;
    -webkit-animation: toleft 0.5s linear 1s forwards;
}
.page-current .title6{
    animation: toleft 0.5s linear 2s forwards;
    -webkit-animation: toleft 0.5s linear 2s forwards;
}
.title5{
    position:absolute;
    left:6%;
    top:12%;
    z-index:3;
    width:64.375%;
    height:3.4%;
    opacity:0;
}
.title6{
    position:absolute;
    left:6%;
    top:17%;
    z-index:3;
    width:34.6875%;
    height:3.4%;
    opacity:0;
}
/*3*/
.send{
    position:absolute;
    bottom: 0;
    left:0;
    z-index:3;
    width:100%;
    height: 100%;
}
.eye{
    width:100%;
    height:90%;
    position:absolute;
    z-index:3;
    top:4%;
    left:0;
}
.left_arm{
    position:absolute;
    left:42%;
    top:51%;
    z-index:2;
    width:5.625%;
    height: 8.98%;
}
.left_bt_arm{
    position:absolute;
    width:19.68%;
    height:10.74%;
    z-index:1;
    top:59%;
    left:39%;
    transform: rotateZ(22deg);
    -webkit-transform: rotateZ(22deg);
}
.daugther_arm{
    position:absolute;
    left:60%;
    top:57%;
    z-index:3;
    width:13.125%;
    height:15.85%;
    transform-origin: top center;
    -webkit-transform-origin: top center;
    transform: rotateZ(32deg);
    -webkit-transform: rotateZ(32deg);
}
.hint.three_hint{
    left:38%;
    top:65%;
}
.title1.three_tit{
    width:33.125%;
}
.title2.three_tit{
    width:33.4375%;
    opacity: 0;
}
.title3.three_tit{
    width:46.25%;
    opacity: 0;
}
.page-current .title1.three_tit{
    animation: toright 0.5s linear forwards;
    -webkit-animation: toright 0.5s linear forwards;
}
.page-current .title2.three_tit{
    animation: toright 0.5s linear 1s forwards;
    -webkit-animation: toright 0.5s linear 1s forwards;
}
.page-current .title3.three_tit{
    animation: toright 0.5s linear 2s forwards;
    -webkit-animation: toright 0.5s linear 2s forwards;
}
/*4*/
.title15,.title7,.title8,.title9,.title10,.title16,.title17,.title18,.title20,.title22,.title23,.title24,.title25,.title26,.title27,.title21,.title28{
    position: absolute;
    left:50%;
    z-index:2;
}
.title7{
    width:15.31%;
    height: 3.5%;
    margin-left: -7.5%;
    top:6%;
}
.title8{
    width:51.56%;
    height:4%;
    top:12%;
    margin-left: -26%;
    opacity: 0;
}
.title9{
    width:39.7%;
    height:3.7%;
    top:18%;
    margin-left: -20%;
    opacity: 0;
}
.title10{
    width:65.3%;
    height:4%;
    top:24%;
    margin-left: -33%;
    opacity: 0;
}
.page-current .title7{
    animation: toup 0.5s linear forwards;
    -webkit-animation: toup 0.5s linear forwards;
}
.page-current .title8{
    animation: toup 0.5s linear 1s forwards;
    -webkit-animation: toup 0.5s linear 1s forwards;
}
.page-current .title9{
    animation: toup 0.5s linear 2s forwards;
    -webkit-animation: toup 0.5s linear 2s forwards;
}
.page-current .title10{
    animation: toup 0.5s linear 3s forwards;
    -webkit-animation: toup 0.5s linear 3s forwards;
}
/*5*/
.eye_five_two{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.page-current .eye_five_two{
    animation: eye 1s ease forwards 3;
    -webkit-animation: eye 1s ease forwards 3;
}
.title11{
    position:absolute;
    left:10%;
    top:7%;
    width:38.4325%;
    height:3.7%;
    opacity: 0;
}
.title12{
    position:absolute;
    left:10%;
    top:12%;
    width:38.4325%;
    height:3.8%;
    opacity: 0;
}
.title13{
    position:absolute;
    left:10%;
    top:17%;
    width:38.4325%;
    height:4.1%;
    opacity: 0;
}
.page-current .title11{
    animation: toup 0.5s linear forwards;
    -webkit-animation: toup 0.5s linear forwards;
}
.page-current .title12{
    animation: toup 0.5s linear 1s forwards;
    -webkit-animation: toup 0.5s linear 1s forwards;
}
.page-current .title13{
    animation: toup 0.5s linear 2s forwards;
    -webkit-animation: toup 0.5s linear 2s forwards;
}
.title14{
    position:absolute;
    right:3%;
    top:47%;
    width:39%;
    height:20.5%;
    transform: scale(0);
    -webkit-transform: scale(0);
    transform-origin: left center;
    -webkit-transform-origin: left center;
}
.page-current .title14{
    animation: scale1 1s linear forwards;
    -webkit-animation: scale1 1s linear forwards;
}
.end{
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}
/*6*/
.title15{
    width:21.56%;
    height:3.7%;
    margin-left: -10.5%;
    top:9%;
    opacity: 0;
}
.title16{
    width:49.375%;
    height:3.8%;
    margin-left: -25%;
    top:14%;
    opacity: 0;
}
.title17{
    width:15%;
    height:3.8%;
    margin-left:-7.5%;
    top:19%;
    opacity: 0;
}
.title18{
    width:49.375%;
    top:24%;
    height:3.7%;
    margin-left: -24.7%;
    opacity: 0;
}
.page-current .title15{
    animation: toup 0.5s linear forwards;
    -webkit-animation: toup 0.5s linear forwards;
}
.page-current .title16{
    animation: toup 0.5s linear 1s forwards;
    -webkit-animation: toup 0.5s linear 1s forwards;
}
.page-current .title17{
    animation: toup 0.5s linear 2s forwards;
    -webkit-animation: toup 0.5s linear 2s forwards;
}
.page-current .title18{
    animation: toup 0.5s linear 3s forwards;
    -webkit-animation: toup 0.5s linear 3s forwards;
}
.to_good{
    width:100%;
    height:90%;
    position:absolute;
    z-index:2;
    left:0;
    top:10%;
}
.hint.six_hint{
    left:38%;
    bottom: 6%;
}
.pint_circle1,.pint_circle2{
    width:16.875%;
    height:8.4%;
    position:absolute;
    top:51%;
    opacity:0;
}
.pint_circle1{
    left:20%;
}
.pint_circle2{
    right:17%;
}
.begin,.end{
    position:absolute;
}
/*7*/
.title20{
    width:50%;
    height:4.3%;
    margin-left: -25%;
    top:7%;
    opacity:0;
}
.page-current .title20{
    animation: tobottom 0.5s linear 1s forwards;
    -webkit-animation: tobottom 0.5s linear 1s forwards;
}
.title22{
    width:55%;
    margin-left: -14%;
    top:13%;
    height: 3.8%;
    opacity: 0;
}
.page-current .title22{
    animation: scale1 1s linear 2s forwards;
    -webkit-animation: scale1 1s linear 2s forwards;
}
.page-current .title21{
     animation: scale1 1s linear 2s forwards,dou 0.5s ease 3s 2 forwards ;
     -webkit-animation: scale1 1s linear 2s forwards,dou 0.5s ease 3s 2 forwards ;
 }
.title21{
    width:23.125%;
    margin-left: -41%;
    top:13%;
    height:4.2%;
    opacity: 0;
}
.title23{
    width:68%;
    height: 2.6%;
    margin-left: -34%;
    top:22%;
    opacity:0;
}
.page-current .title23{
    animation: tobottom 0.5s linear 3s forwards;
    -webkit-animation: tobottom 0.5s linear 3s forwards;
}
.title24{
    width:68%;
    height: 2.6%;
    margin-left: -34%;
    top:25%;
    opacity:0;
}
.page-current .title24{
    animation: tobottom 0.5s linear 3.5s forwards;
    -webkit-animation: tobottom 0.5s linear 3.5s forwards;
}
.title25{
    width:62%;
    height:3.97%;
    margin-left: -31%;
    top:33%;
    opacity: 0;
}
.page-current .title25{
    animation: scale1 1s linear 4s forwards;
    -webkit-animation: scale1 1s linear 4s forwards;
}
.title26{
    width:10%;
    height:5.1%;
    margin-left: -23%;
    top:32%;
    opacity: 0;
}
.page-current .title26{
    animation: scale1 0.5s linear 4.5s forwards,dou 0.5s ease 5.5s 2 forwards ;
    -webkit-animation: scale1 0.5s linear 4.5s forwards,dou 0.5s ease 5.5s 2 forwards;
}
@keyframes dou {
    0%{
        transform: scale(1.2);
        -webkit-transform:scale(1.2);
    }
    100%{
        transform: scale(1);
        -webkit-transform:scale(1);
    }
}
.title27{
    width:17.5%;
    top:52%;
    height:9.8%;
    margin-left: -8.5%;
}
.page-current .title27{
    animation: scale1 0.5s linear  forwards;
    -webkit-animation: scale1 0.5s linear forwards;
}
.title28{
    width: 15.9%;
    top:68%;
    height:3.2%;
    margin-left: -8%;
    opacity:0;
}
.page-current .title28{
    animation: scale1 0.5s linear 5s forwards;
    -webkit-animation: scale1 0.5s linear 5s forwards;
}
.title29{
    width:35%;
    position:absolute;
    bottom:5%;
    left:7%;
    height: 7.1%;
    opacity:0;
}
.page-current .title29,.page-current .title30{
    animation: toup 0.5s linear 6s forwards;
    -webkit-animation: toup 0.5s linear 6s forwards;
}
.title30{
    width:35%;
    position:absolute;
    bottom:5%;
    right:7%;
    height: 7.1%;
    opacity:0;
}
.mask{
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;
    left:100%;
    top:0;
    background: rgba(0,0,0,0.7);
}
.mask img{
    width:8%;
    height:80%;
    position:absolute;
    right:2%;
    top:10%;
}
.masktap{
    animation: left 0.5s ease forwards;
    -webkit-animation: left 0.5s ease forwards;
}
.masktap1{
    animation: right 0.5s ease forwards;
    -webkit-animation: right 0.5s ease forwards;
}

